<template>
  <div class="node-panel">
    <div class="node-item" @mousedown="openSelection()">
      <div class="node-item-icon bpmn-selection"></div>
      <span class="node-label">选区</span>
    </div>
    <div class="node-item" @mousedown="addStartNode()">
      <div class="node-item-icon bpmn-start"></div>
      <span class="node-label">开始</span>
    </div>
    <div class="node-item" @mousedown="addUserTask()">
      <div class="node-item-icon bpmn-user"></div>
      <span class="node-label">用户</span>
    </div>
    <div class="node-item" @mousedown="addServiceTask()">
      <div class="node-item-icon bpmn-service"></div>
      <span class="node-label">系统</span>
    </div>
    <div class="node-item" @mousedown="addGateWay()">
      <div class="node-item-icon bpmn-gateway"></div>
      <span class="node-label">网关</span>
    </div>
    <div class="node-item" @mousedown="addEndNode()">
      <div class="node-item-icon bpmn-end"></div>
      <span class="node-label">结束</span>
    </div>
  </div>
</template>
<script lang="ts">
import LogicFlow from '@logicflow/core';
export default {
  name: "BpmnNodePanel",
  data() {
    return {}
  },
  props: {
    lf: Object,
  },

  mounted() {
    //选区框选使用的
    let lf = this.$props.lf as LogicFlow;
    lf &&
      lf.on("selection:selected", () => {
        lf.updateEditConfig({
          stopMoveGraph: false,
        });
      });
  },
  methods: {
    openSelection() {
      (this.$props.lf as LogicFlow).updateEditConfig({
        stopMoveGraph: true
      });
    },
    addStartNode() {
      (this.$props.lf as LogicFlow).dnd.startDrag({
        type: "bpmn:startEvent",
        text: "开始",
        properties:{'start':'开始'}, //自定义属性，同时导出的文件节点属性上会生成
      });
    },
    addUserTask() {
      (this.$props.lf as LogicFlow).dnd.startDrag({
        type: "bpmn:userTask",
        text: "用户",
      });
    },
    addServiceTask() {
      (this.$props.lf as LogicFlow).dnd.startDrag({
        type: "bpmn:serviceTask",
        text: "系统",
      });
    },
    addGateWay() {
      (this.$props.lf as LogicFlow).dnd.startDrag({
        type: "bpmn:exclusiveGateway",
        text: "网关",
      });
    },
    addEndNode() {
      (this.$props.lf as LogicFlow).dnd.startDrag({
        type: "bpmn:endEvent",
        text: "结束",
      });
    },
  },
};
</script>
<style>
.node-panel {
  position: absolute;
  top: 100px;
  left: 10px;
  width: 50px;
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 6px;
  text-align: center;
  z-index: 101;
}
.node-item {
  margin-bottom: 10px;
}
.node-item-icon {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  background-size: cover;
}
.node-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}

.bpmn-selection {
  background: url()
    center center no-repeat;
  cursor: grab;
}

.bpmn-start {
  background: url()
    center center no-repeat;
  cursor: grab;
}
.bpmn-end {
  background: url()
    center center no-repeat;
  cursor: grab;
}
.bpmn-user {
  background: url()
    center center no-repeat;
  cursor: grab;
}
.bpmn-gateway {
  background: url()
    center center no-repeat;
  cursor: grab;
}

.bpmn-service {
  background: url()
    center center no-repeat;
  cursor: grab;
}
</style>
